<template>
  <div>
    <!-- 地图 -->
    <div class="map-container" id="containerEdit" :style="styleObj"></div>
    <div class="input-card">
      <button class="btn" @click.prevent.stop="addRecord">新增记录</button>
      <button class="btn" @click.prevent.stop="deleteRecord">删除记录</button>
    </div>
    <div class="records">
      <div v-for="(record, index) in records" :key="index" class="record">
        <input v-model="record.note" placeholder="输入备注" />
        <span>{{ record.lng }}, {{ record.lat }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: 'MapRealTimeContainer',
  data() {
    return {
      map: null,
      styleObj: {
        width: '100%',
        height: '600px',
      },
      records: [], // 存储用户的记录
      currentRecord: null, // 当前选中的记录
    };
  },
  mounted() {
    this.initAMap();
    this.loadRecords();
  },
  methods: {
    initAMap() {
      if ('geolocation' in navigator) {
        console.log('浏览器支持地理位置');
      } else {
        console.log('浏览器不支持地理位置');
      }

      window._AMapSecurityConfig = {
        securityJsCode: 'd48e7f2bd17c16b4cb757cffbb694b90',
      };
      AMapLoader.load({
        key: '2b05e7179f91bbd5c2c8b9780493cf28',
        version: '2.0',
        plugins: [
          'AMap.Geolocation'
        ],
        resizeEnable: true,
      }).then((AMap) => {
        this.map = new AMap.Map('containerEdit', {
          viewMode: '3D',
          zoom: 13,
          mapStyle: 'amap://styles/normal',
        });

        // 获取用户地理位置并设置为地图中心点
        const geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,
          timeout: 10000,
        });
        geolocation.getCurrentPosition((status, result) => {
          console.log(status, result);
          if (status === 'complete') {
            this.map.setCenter([result.position.lng, result.position.lat]);
          } else {
            console.error('获取地理位置失败，使用默认中心点');
            this.map.setCenter([119.30692, 26.078093]); // 默认中心点
          }
        });

        // 监听地图点击事件
        this.map.on('click', (e) => {
          this.currentRecord = {
            lng: e.lnglat.getLng(),
            lat: e.lnglat.getLat(),
            note: '',
          };
        });
      }).catch((e) => {
        console.log(e);
      });
    },
    addRecord() {
      if (this.currentRecord) {
        this.records.push(this.currentRecord);
        this.saveRecords();
        this.currentRecord = null;
      }
    },
    deleteRecord() {
      if (this.currentRecord) {
        this.records = this.records.filter(record => record !== this.currentRecord);
        this.saveRecords();
        this.currentRecord = null;
      }
    },
    saveRecords() {
      localStorage.setItem('mapRecords', JSON.stringify(this.records));
    },
    loadRecords() {
      const records = localStorage.getItem('mapRecords');
      if (records) {
        this.records = JSON.parse(records);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.map-container {
  position: relative;
  padding: 0px;
  margin: 10px 0;
}

.input-card {
  position: absolute;
  right: 30px;
  bottom: 30px;
  width: 124px;
  padding: 10px 10px;
  background-color: #cccccc;

  .btn {
    display: block;
    width: 100px;
    margin: 10px auto;
    color: #fff;
    border: none;
    background-color: rgb(26, 120, 28);
  }
}

.records {
  position: absolute;
  left: 30px;
  bottom: 30px;
  background-color: white;
  padding: 10px;

  .record {
    margin-bottom: 10px;

    input {
      margin-right: 10px;
    }
  }
}
</style>